<template>
  <div class="cloudsKit-container" :style="{ width: cWidth, height: cHeight}">
    <div class="clouds-list" v-for="item in cloudStyles">
      <div class="clouds-container" :class="item.name" :style="item.style">
        <div class="clouds-left"></div>
        <div class="clouds-middle"></div>
        <div class="clouds-right"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cloudsKit',
  props:{
    cloudsNumbers:{
      type: String,
      default: '2',
    },
    cWidth:{
      type: String,
      default: '100%',
    },
    cHeight:{
      type: String,
      default: '80px',
    },
    cloudStyles:{
      type: Array,
      default: () =>[]
    },
  },
}
</script>

<style lang="scss" scoped>
.cloudsKit-container{
  display: flex;
}
.clouds-list{
  position: relative;
}
.clouds-container{
  width: 150px;
  height: 50px;
  display: flex;
  position: absolute;
  .clouds-left{
    width: 50px;
    height: 30px;
    background: #daeffd;
    border-radius: 72px 0 0 53px;
    margin-top: 10px;
    position: relative;
  }
  .clouds-left:before{
    content: "";
    display: block;
    width: 45px;
    height: 40px;
    background: #daeffd;
    border-radius: 30px;
    position: absolute;
    top: -18px;
    left: 20px;
  }
  .clouds-left:after{
    content: "";
    display: block;
    width: 37px;
    height: 40px;
    background: #daeffd;
    border-radius: 30px;
    position: absolute;
    top: 3px;
    left: 20px;
  }
  .clouds-middle{
    width: 50px;
    height: 30px;
    background: #daeffd;
    margin-top: 10px;
    position: relative;
  }
  .clouds-middle:before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: #daeffd;
    border-radius: 30px;
    position: absolute;
    top: -14px;
    left: 7px;
  }
  .clouds-middle:after{
    content: "";
    display: block;
    width: 55px;
    height: 41px;
    background: #daeffd;
    border-radius: 30px;
    position: absolute;
    top: 3px;
    left: -2px;
  }
  .clouds-right{
    width: 50px;
    height: 30px;
    background: #daeffd;
    margin-top: 10px;
    border-radius: 0 30px 50px 0;
    position: relative;
  }
  .clouds-right:before{
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background: #daeffd;
    border-radius: 30px;
    position: absolute;
    top: -17px;
    left: -17px;
  }
  .clouds-right:after{
    content: "";
    display: block;
    width: 37px;
    height: 41px;
    background: #daeffd;
    border-radius: 30px;
    position: absolute;
    top: 3px;
    left: -2px;
  }
}
</style>
